<template>
	<view class="df_register_info">
		<view class="df_head" :style=" {background: 'url('+headImg+')'}">

		</view>
		<view class="df_content">
			<view class="df_con_top">
				<text class="top_log">完善信息</text>
				<!-- <text class="top_reg" @click="goToLogin">已注册, 立即<text>登录</text></text> -->
			</view>
			<view class="df_con_inp">
				<u-input class="u-input" height="130" v-model="phone" type="number" placeholder="输入手机号" />
				<view class="inp_code">
					<u-input class="u-input" height="130" v-model="code" type="number" placeholder="输入验证码" />
					<view class="get_code">
						<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
						<text @click.stop="getCode">{{tips}}</text>
					</view>
				</view>
				<!-- <u-input class="u-input" height="130" v-model="password" type="password" placeholder="设置密码" /> -->
				<!-- <u-input class="u-input" height="130" v-model="newPassword" type="password" placeholder="确认密码" /> -->
				<view class="city" @click="showCity = true">
					<text>省市区</text>
					<text style="font-size: 30rpx;">{{selectedCity}}</text>
					<image class="city_img" :src="'https://community.chuangxiangdianli.com/images/loginImg/you.png'" mode=""></image>
				</view>

				<view class="region" @click="showAddress = true">
					<text>具体住址</text>
					<textarea class="textarea" v-model="detailsRegion" placeholder="请输入详细位置：xx小区xx楼 xx单元xx_xxx门牌号"></textarea>
				</view>
			</view>

			<view class="df_con_btn" @click="confirmBtn">
				确认
			</view>
		</view>
		<view class="df_footer" :style=" {background: 'url('+footerImg+')'}">

		</view>
		<!-- 选择城市 -->
		<u-picker mode="region" v-model="showCity" :range="selector" confirm-color="#46c8ac" :params="params" @confirm="confirmCity"
		 safe-area-inset-bottom></u-picker>

		<!-- 获取详情数据弹框 -->
		<u-popup class="add_ress" v-model="showAddress" mode="bottom" height="70%" border-radius="14">
			<view class="add_top">
				<text class="top_deta">选择详细地址</text>
				<scroll-view scroll-y class="top_list">
					<view class="top_item" v-for="(item,index) in AddSelectedTop" :key="index" @click="reselectRess(index)">
						{{item}} 
						<text class="circular"></text>
					</view>
				</scroll-view >
			</view>
			<scroll-view scroll-y class="add_con"> 
				<view class="con_list">
					<template v-if="AddSelectedTop.length == 0">
						<view class="con_item" v-for="item in AddAllSelected.communityList" :key="item.community_id" @click="seleteAdd(item,'1')">
							{{item.community_name}}
						</view>
					</template> 
					
					<template v-if="AddSelectedTop.length == 1">
						<view class="con_item" v-for="item in AddAllSelected.houseList" :key="item.h_id" @click="seleteAdd(item, '2')">
							{{item.house_num}}号楼
						</view>
					</template>
					  
					<template v-if="AddSelectedTop.length == 2">
						<view class="con_item" v-for="item in AddAllSelected.elementList" :key="item.e_id" @click="seleteAdd(item, '3')">
							{{item.element_num}}单元 
						</view>
					</template>
					  
					<template v-if="AddSelectedTop.length == 3">
						<view class="con_item" v-for="item in AddAllSelected.floorList" :key="item.f_id" @click="seleteAdd(item, '4')">
							{{item.floor}}楼
						</view> 
					</template>
					 
					
					<template v-if="AddSelectedTop.length == 4">
						<view class="con_item" v-for="item in AddAllSelected.roomList" :key="item.r_id" @click="seleteAdd(item, '5')">
							{{item.room}}房间
						</view> 
					</template>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import {
		checkPhone,
		filterCity
	} from '@/utils/utils.js'
	import {getStorages,setStorages} from '@/utils/storage'
	export default {
		data() {
			return {
				params: {
					province: true,
					city: true,
					area: true
				},
				headImg: 'https://community.chuangxiangdianli.com/images/loginImg/login_bg_one.png',
				footerImg: 'https://community.chuangxiangdianli.com/images/loginImg/login_bg_two.png',
				phone: '',
				password: '',
				newPassword: '',
				tips: '',
				code: '',
				seconds: 60,
				// 小区id
				communityId: null,
				// 房间id
				roomId: null,
				// 城市选择框
				showCity: false,
				// 省市区列表
				areaList: [],
				// 城市数据
				cityInfo: {},
				// 已选择数据
				selectedCity: '请选择XX省XX市XX区',
				form: {
					city: '',
					address: '',
				},
				// 详细地址选择
				showAddress: false,
				// 已选择地址 上
				AddSelectedTop:[],
				// 已选择地址列表
				AddAllSelected: {
					communityList:[],
					houseList:[],
					elementList: [],
					floorList:[],
					roomList: []
				},
				// 详细地址
				detailsRegion: '',
				// 是否倒计时
				isCanGetCode: true,
				// 注册成功跳转页面倒计时
				goHomeTime: null
			};

		},
		onShow() {
			this.getAreaLists()
		},
		methods: {
			codeChange(text) {
				this.tips = text
			},
			getCode() { 
				// if (!checkPhone(this.phone)) {
				// 	uni.showToast({
				// 		title: '手机号格式错误',
				// 		icon: 'none',
				// 		duration: 1000
				// 	})
				// 	return false
				// } 
					if (this.$refs.uCode.canGetCode) {
						// 开始倒计时
						this.$refs.uCode.start();  
						this.getSendSms(this.phone)
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
			},
			confirmBtn() { 
				let _this = this
				if (!_this.phone) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 1000
					})
					return false
				}
				if (!_this.code) {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none',
						duration: 1000
					})
					return false
				} 
				let userInfo = getStorages('userInfo')
				// let {nickName,openid,avatarUrl,gender} = getStorages('userInfo')
				let data  = {
					open_id: userInfo.openid,
					phone: _this.phone,
					// password: this.password,
					// confirm_pass: this.newPassword,
					nickname: userInfo.nickName,
					sex: userInfo.gender,
					avatar: userInfo.avatarUrl,
					community_id: _this.communityId,
					room_id: _this.roomId,
					sms_code: _this.code,
					province_id:_this.cityInfo.province_id,
					city_id:_this.cityInfo.city_id,
					area_id:_this.cityInfo.area_id,
					address:_this.selectedCity
					
				}   
				console.log(data)
				// return
				_this.$http.post(
				{url:'wechat/register', data} 
				).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '信息绑定成功',
							icon: 'none'
						})
						setStorages('userInfo', Object.assign(userInfo,res.data)) 
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} 
					clearTimeout(_this.goHomeTime)
					_this.goHomeTime = setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/index',
							success() {
								clearTimeout(_this.goHomeTime) 
							}
						})
					},1000)
				})
			},
			// 确认选择城市
			confirmCity(e) {
				let _this = this
				_this.selectedCity = e.province.label + '-' + e.city.label + '-' + e.area.label
				_this.cityInfo = filterCity(_this.areaList, e)
				// 获取小区数据
				_this.getAllCommunity(_this.cityInfo) 
			},
			// 登录页
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			// 获取省市区数据
			getAreaLists() {
				this.$http.get('wechat/areaLists').then(res => {
					if (res.code == 200) {
						this.areaList = res.data
					}
				})
			},
			// 获取小区数据
			getAllCommunity(cityInfo){ 
				let {province_id,city_id,area_id} = cityInfo 
				this.$http.get('wechat/allCommunity/' + province_id + '/' + city_id + '/' + area_id).then(res => { 
					if(res.code == 200){ 
						this.AddAllSelected.communityList = res.data
					}
				})
			},
			// 根据小区id获取楼栋
			getAllHouse(id){
				this.$http.get('wechat/allHouse/' + id).then(res => {
					if(res.code == 200){
						this.AddAllSelected.houseList = res.data 
					}
				})
			},
			// 根据楼号id 获取单元
			getAllElement(id){
				this.$http.get('wechat/allElement/' + id).then(res => {
					if(res.code == 200){
						this.AddAllSelected.elementList = res.data  
					}
				})
			},
			// 根据单元id 获取对应楼层
			getAllFloor(id){
				this.$http.get('wechat/allFloor/' + id).then(res => {
					if(res.code == 200){
						this.AddAllSelected.floorList = res.data  
					}
				})
			},
			// 根据楼层id获取对应房间号
			getAllRoom(id){
				this.$http.get('wechat/allRoom/' + id).then(res => {
					if(res.code == 200){ 
						this.AddAllSelected.roomList = res.data  
					}
				})
			},
			// 选择详细地址
			seleteAdd(info,index){  
				switch(index){
					case '1':
					this.AddSelectedTop.push(info.community_name) 
					this.getAllHouse(info.community_id)
					this.communityId = info.community_id
					break;
					case '2':  
					this.AddSelectedTop.push(info.house_num + '号楼') 
					this.getAllElement(info.h_id)
					break;
					case '3': 
					this.AddSelectedTop.push(info.element_num + '单元') 
					this.getAllFloor(info.e_id)
					break;
					case '4': 
					this.AddSelectedTop.push(info.floor + '楼') 
					this.getAllRoom(info.f_id) 
					break;
					case '5':    
					   this.AddSelectedTop.push(info.room + '房间')
					   this.showAddress = false
					   this.roomId = info.r_id
					   this.AddSelectedTop.map((val) => {
						   this.detailsRegion = this.detailsRegion + '-' + val 
					   })
					break; 
				} 
			},
			// 重新选择
			reselectRess(index){  
				this.AddSelectedTop.splice(index)
			},
			// 获取验证码
			getSendSms(phone){
				this.$http.get(
				'wechat/send_sms',{phone,name: 'register'}
				).then(res => {  
					res.code == 200? this.isCanGetCode = true : this.isCanGetCode = false
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			}
		},
		onHide(){
			clearTimeout(this.goHomeTime) 
		}
	}
</script>

<style lang="scss" scoped>
	.df_register_info {
		height: 100vh;

		.df_head {
			width: 100%;
			height: 293rpx;
		}

		.df_content {
			padding: 0 58rpx;
			height: calc(100% - 293rpx);

			.df_con_top {
				height: 200rpx;
				line-height: 80rpx;

				.top_log {
					position: relative;
					display: block;
					font-size: 40rpx;
					color: #333;
					font-weight: 700;
					
					& ::after {
						position: absolute;
						bottom: -10rpx;
						left: 0;
						content: '';
						height: 10rpx;
						width: 160rpx;
						background-color: #70dac4;

					}
				}

				.top_reg {
					font-size: 30rpx;
					color: #999;

					text:nth-child(1) {
						color: #68d7c0;
						font-size: 38rpx;
					}
				}
			}

			.df_con_inp {
				.u-input {
					display: flex;
					border-bottom: 1px solid #eaeaea;

					&>input {
						font-size: 34rpx;
					}
				}

				.city,
				.region {
					display: flex;
					justify-content: space-between;
					font-size: 36rpx;
					color: #B4BBC9;
					height: 130rpx;
					line-height: 130rpx;
					border-bottom: 1rpx solid #eaeaea;

					.city_img {
						margin: auto 0;
						width: 36rpx;
						height: 40rpx;
					}

					.textarea {
						margin-top: 30rpx;
						width: 400rpx;
						height: 90rpx;
						font-size: 30rpx;
						line-height: 20rpx;
						color: #B4BBC9;
					}
				}

				.inp_code {
					position: relative;

					.get_code {
						position: absolute;
						top: 50%;
						right: 0;
						font-size: 32rpx;
						color: #70dac4;
						z-index: 10;
						transform: translate(0, -50%);
					}
				}

				.for_password {
					margin-top: 60rpx;
					float: right;
					font-size: 32rpx;
					color: #47c8ac;
				}
			}

			.df_con_btn {
				margin-top: 30rpx;
				position: relative;
				height: 90rpx;
				line-height: 90rpx;
				width: 100%;
				text-align: center;
				color: #fff;
				font-size: 34rpx;
				font-weight: 500;
				z-index: 100;
				background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
				box-shadow: 0px 5rpx 12rpx 1rpx rgba(68, 198, 170, 0.3);
				border-radius: 45rpx;
			}
		}

		.df_footer {
			position: absolute;
			bottom: 0;
			width: 534rpx;
			height: 426rpx;
		}
		
		.add_ress{
			position: relative; 
			.add_top{  
				min-height: 300rpx;
				.top_deta{
					display: block;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
				}
				.top_list{
					height: 360rpx;
					.top_item {
						padding: 0 60rpx;
						position: relative;
						height: 100rpx;
						line-height: 100rpx;
						.circular{
							position: absolute;
							display: inline-block;
							left: 20rpx;
							top: 50%;
							transform: translateY(-50%); 
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background-color: #fa4d00;
						}
						// &::before{
						// 	position: absolute;
						// 	left: -30rpx;
						// 	top: 50%;
						// 	transform: translateY(-50%);
						// 	content:'';
						// 	width: 20rpx;
						// 	height: 20rpx;
						// 	border-radius: 50%;
						// 	background-color: #fa4d00;
						// }
					}
				}
			}
			.add_con{ 
				position: absolute;
				padding: 20rpx 20rpx 20rpx 30rpx;
				width: 100%;
				bottom: 0;
				height: 55%; 
				border-top: 2rpx solid #e3e3e3;
				.con_list{
					.con_item{
						height: 100rpx;
						line-height: 100rpx;
					}
				}
			}
		}
	}
</style>
  
 